﻿@using Orchard.Utility.Extensions
@{
    Style.Require("jQueryUI_Orchard");
    Style.Require("FancyBox");
    Style.Require("NineSeas.Common");
    Style.Require("NineSeas.Reader");
    Style.Require("NineSeas.Book.View");

    Script.Require("jQuery").AtHead();
    Script.Require("FancyBox");
    Script.Require("NineSeas.CommandBar");
    Script.Require("NineSeas.Common");
    Script.Require("NineSeas.InplaceMessage");

    Layout.Title = ((string)Model.Book.Name).Ellipsize(50);

    var metaDescription = ((string)Model.Book.Introduction).RemoveTags().Ellipsize(160);

    var bookImageUrl = String.IsNullOrWhiteSpace(Model.Book.ImageUrl) ?
            Href("~/Modules/NineSeas/Images/placeholder-book.png")
            : Model.Book.ImageUrl;

    var tagsHtml = new List<IHtmlString>();
    var metaTags = new List<string>();
    foreach (var t in Model.Book.Tags.CurrentTags)
    {
        if (tagsHtml.Any())
        {
            tagsHtml.Add(new HtmlString(" "));
        }
        tagsHtml.Add(Html.ActionLink((string)t.TagName, "Search", "Home", new { area = "Orchard.Tags", tagName = (string)t.TagName }, new { }));
        
        if (metaTags.Count < 10) {
            metaTags.Add(t.TagName);
        }
    }
    
    var nextUrl = Url.Action("Toc", "BookView", new { name = Model.Book.NameOnUrl });
    if (Model.Chapters.Count <= 1)
    {
        nextUrl = Url.Action("Chapter", "BookView", new { name = Model.Book.NameOnUrl, chapterIndex = Model.First.SortOrder });
    }
}
@using (Script.Head())
{
    <meta name="Description" content="@metaDescription"/>
    
    if (metaTags.Count > 0) {
        <meta name="Keywords" content="@metaTags.Aggregate((i, j) => i + ", " + j)"/>
    }
}
<div id="nineseas">
    <div id="nineseas-reader-header">
        <div class="header-bullet"></div>
       <h1>@Model.Book.Name</h1> 
    </div>
    <div id="nineseas-reader-content">
        <a id="nextPage" href="@nextUrl" class="book-page-navigation">
            <div>
                <div class="icon-direction"></div>
            </div>
        </a>
        <div id="content-area">
            <div id="image-area">
                <img src="@bookImageUrl" alt="@Model.Book.Name"/>
            </div>
            <div id="book-name">@Model.Book.Name</div>   
            <div id="book-created">@T("Added"): @Model.Book.CreatedDate.ToString("dd/MM/yyyy")</div> 
            <div id="book-last-updated">@T("Last Updated"): @Model.Book.LastUpdatedDate.ToString("dd/MM/yyyy")</div> 
            <div id="book-author">@T("Author"): <a href="@Url.Action("Details", "Authors", new {id = Model.Author.Id})">@Model.Author.DisplayName</a></div> 
            <div id="book-likes">@T("Likes"): @(Model.Book.TotalLikes.ToString("#,#;(#,#);0"))</div>
            <div id="book-views">@T("Views"): @(Model.Book.TotalViews.ToString("#,#;(#,#);0"))</div> 
            <div style="clear:both;"></div>  
            <div class="tags">@foreach(var htmlString in tagsHtml) { @htmlString }</div>       
            <div id="introduction-area">
                @(new MvcHtmlString(Model.Book.Introduction))
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div id="nineseas-reader-footer">
        
    </div>    
    <div id="throbber">
        <div class="curtain"></div>
        <div class="curtain-content">
            <div>
                <h1>@T("Processing ...")</h1>
                <p>
                    <img src="@Href("~/Modules/NineSeas/images/synchronizing.gif")" alt="" />
                </p>
            </div>
        </div>
    </div>
</div>
<div id="commentArea" style="display: none; width: 560px; margin: 0 auto;">
    <div class="fb-comments" data-href="@Url.Action("Index", "BookView", new {name = Model.Book.NameOnUrl}, Request.Url.Scheme)" 
        data-num-posts="@Model.Settings.FbCommentsNumberOfPosts" 
        data-width="@Model.Settings.FbCommentsWidth" 
        data-colorscheme="@Model.Settings.FbCommentsColorScheme"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        if ($("#commentArea").length > 0 && $("#nineseas-reader-footer").length > 0) {
            $.commandBar('#nineseas-reader-footer', {
                left: [
                    {
                        id: 'likeButton',
                        type: 'a', // button | a
                        href: 'javascript:;',
                        classes: ['@(Model.IsLiked ? "liked" : "like")'],
                        caption: '@(Model.IsLiked ? T("Liked") : T("Like"))',
                        isEnabled: true,
                        enabled: null,
                        onClick: function () {
                            var isLiked = $("#likeButton").hasClass("liked");

                            $.get("@Url.Action("Like", "BookView", new {name = Model.Book.NameOnUrl})",
                                {
                                    like: isLiked ? '0' : '1' // currently liked => unlike
                                },
                                function (data) {
                                    if (data && data.success) {
                                        if (data.caption) {
                                            $("#likeButton").html(data.caption);
                                        }

                                        if (isLiked) {
                                            $("#likeButton").removeClass("liked").addClass("like");
                                        } else {
                                            $("#likeButton").removeClass("like").addClass("liked");
                                        }
                                    }
                                },
                                "json");
                        }
                    },
                    {
                        id: 'commentButton',
                        type: 'a', // button | a
                        href: '#commentArea',
                        classes: [],
                        caption: '@T("Comment")',
                        isEnabled: true,
                        enabled: null,
                        onClick: function () { }
                    }
                ],
                right: []
            });
            $("#commentButton").fancybox({
                width: '600px',
                height: '90%',
                autoSize: false,
                openEffect: 'none',
                closeEffect: 'none'
            });
        }
    });    
</script>